import React, { useState, useEffect, useCallback, useRef } from 'react';
import {
  StyleSheet,
  Text, View,
  Dimensions,
  ScrollView,
  Image,
  TouchableOpacity,
  Modal,
  TextInput,
  Alert,
  Platform
} from 'react-native';
import { Tabs } from "@ant-design/react-native";
import Collapsible from 'react-native-collapsible';
import axiosApi from '../Api/axios';
import VideoPlayer from "./VideoPlayer"
import * as Sharing from 'expo-sharing';
import * as FileSystem from 'expo-file-system';

export default function ExcellentclassShow() {
  const tabs = [
    { title: "课程介绍" },
    { title: "讲者介绍" },
    { title: "课程目录" },
    { title: "课程课件" },
    { title: "用户评论" },
  ];
  const [num, setNum] = useState(1226)
  const [flag, setFlag] = useState(false)
  const [data, setData] = useState<any>([])

  const [collapsed, setCollapsed] = useState(true);
  const [collapsed1, setCollapsed1] = useState(true);
  const [collapsed2, setCollapsed2] = useState(true);
  const [visible, setVisible] = useState(false);
  const [visible1, setVisible1] = useState(false);
  const [text, setText] = useState(''); // 管理输入框的内容





  const getdate = async () => {
    try {
      const response = await axiosApi.get("/fps/xiang");
      setData(response.data.xiang);
    } catch (error) {
      console.error("错误原因", error);
    }
  }
  useEffect(() => {
    getdate()
  }, [])
  const toggleModal = () => {
    setVisible(!visible); // 切换弹出层的显示/隐藏状态
  };



  const videoSource = "https://media.w3.org/2010/05/sintel/trailer.mp4"; // 远程视频链接

  const toggleModal1 = async () => {
    const filename = 'small.mp4';
    let localUri = videoSource;  // 先假设 videoSource 是远程 URL

    // 如果 videoSource 是一个远程 URL，则下载到本地存储
    if (videoSource.startsWith('http')) {
      try {
        const result = await FileSystem.downloadAsync(
          videoSource,
          FileSystem.documentDirectory + filename
        );
        localUri = result.uri;  // 下载后的本地文件路径
      } catch (error) {
        console.error('下载文件失败:', error);
        Alert.alert('错误', '文件下载失败');
        return;
      }
    }

    // 直接分享本地文件
    shareAsync(localUri, filename, 'video/mp4');
  }

  const shareAsync = async (uri: string, filename: string = '', mimeType: string = '') => {
    try {
      if (await Sharing.isAvailableAsync()) {
        // 直接分享本地文件
        await Sharing.shareAsync(uri, {
          mimeType: mimeType,
          dialogTitle: `分享 ${filename}`,  // 分享时的标题
          UTI: mimeType,  // 设置 MIME 类型
        });
      } else {
        Alert.alert('错误', '该设备不支持分享功能');
      }
    } catch (error) {
      console.error("分享文件时出错:", error);
      Alert.alert("错误", "文件分享失败");
    }
  }








  const togsdgleModal1 = () => {
    setVisible1(!visible1); // 切换弹出层的显示/隐藏状态
  }
  const toggle1Modal = async () => {
    if (text) {
      let obj = {
        xiangname: "李四",
        xiangtitle: text
      };
      try {
        const response = await axiosApi.post("/fps/xiangadd", obj);
        if (response.data.code === 200) {
          Alert.alert("发布成功");
          setVisible(false);
          setText("");
          getdate();
        } else {
          Alert.alert("发布失败", "请稍后再试");
        }
      } catch (error) {
        Alert.alert("发布失败", "发生了错误，请检查网络连接");
      }
    } else {
      Alert.alert("请输入内容");
    }
  };


  const weixin = async () => {

  };
  const qq = () => {
    console.log(2222);



  }
  const xinlang = () => {
    console.log(33333333);
  }



  return (
    <View style={styles.container}>
      <View style={styles.top}>
        <VideoPlayer />
      </View>

      <Tabs tabs={tabs} style={styles.tabs}>
        <View style={styles.tabContent}>
          <ScrollView>
            <View style={{ height: 500 }}>
              <Text style={{ fontSize: 13, color: '#000', lineHeight: 40 }}>为了切实帮助我国广大临床医务工作者提高对结直肠癌的诊治能力和规范化诊疗行为，打造一个在线学习、交流、提升规范化诊疗能力的平台。CSCO肿瘤协会于2018年成立CSCO-希望之路空中学院，通过国内领域知名专家对《中国临床肿瘤学会结直肠癌诊疗指南2018版》的标准化解读和病理研讨，促进结直肠癌诊疗的规范化开展。为中国患者提供更精准、高效、安全的规范化诊疗。</Text>
              <Text style={{ fontSize: 13, color: '#000', lineHeight: 30, marginTop: 30, marginBottom: 30 }}>在此,我们诚挚地邀请您收看本期希望公开课，并积极参与网络互动。</Text>
            </View>
          </ScrollView>
        </View>
        <View style={styles.tabContent}>
          <ScrollView>
            <Text style={{ fontSize: 13, color: '#000', lineHeight: 30, marginTop: 30, marginBottom: 30 }}>袁英，男，副主任医师，副教授，医学博士。1973年8月出生，于1996年7月毕业于新乡医学院临床医学系眼耳鼻喉专业，2001年于山东大学医学院取得硕士学位，2006年于山东大学医学院取得医学博士学位。

              现任聊城市人民医院眼耳鼻喉医院副院长，聊城市人民医院耳鼻咽喉-头颈外科主任。是聊城市耳鼻咽喉-头颈外科学科带头人。 在专业技能及教学科研方面积累了丰富的经验，尤其是在头颈肿瘤的基础与临床、成人及小儿鼾症手术治疗、嗓音外科以及鼻内镜外科技术等方面有颇深造诣。

              在聊城首先创立了双腔尿管法取小儿食道异物，为此类急症病人极大地缩短了住院时间和降低了费用；在我市系统开创了保留喉功能的喉癌下咽癌手术以及面中部掀翻进路鼻肿瘤切除术，规范了手术方式，最大限度的在彻底切除肿瘤的同时提高患者手术后的生存质量。

              撰写的博士论文《下咽后壁癌的手术治疗及Kai-1基因在下咽癌中的表达及意义》得到专家好评；建立了聊城市头颈肿瘤患者的资料库，进行了大量的临床随访和宣教工作，提高了喉癌、下咽癌术后生存率；在晚期甲状腺癌如何保留呼吸及吞咽功能方面进行了深入地探索，为此类患者带来重生的希望；对鼾症的监测和手术治疗进行发展和规范，开展了上气道多平面手术、个性化治疗等手段，开创性的进行了硬腭截短、下颌前徙、舌根部分切除、软腭及舌根等离子减容治疗等国内新技术，明显提高了鼾症手术治愈率和有效率。开展了微创外科进行小儿扁桃体腺样体切除术以及喉嗓音整复手术，技术水平在同级医院处于领先地位。

              承担了省市级科研项目4项，编著了《口腔耳鼻咽喉急危重症》（副主编），在国内专业期刊杂志上发表论著6篇，其中2项研究为国内领先水平。目前担任山东省中西医结合委员耳鼻咽喉分会委员，中国听力与语言康复委员会山东分会委员。</Text>
          </ScrollView>
        </View>
        <View style={styles.tabContent}>

          <ScrollView>
            <TouchableOpacity onPress={() => setCollapsed(!collapsed)} style={styles.header}>
              <Text style={styles.headerText}>01.结直肠癌病理                            <Text style={{ color: '#999' }}>共3节  <Image
                source={require('../../assets/images/xiala.png')}
                style={{ width: 15, height: 15, marginLeft: 10 }}
              ></Image></Text></Text>
            </TouchableOpacity>
            <Collapsible collapsed={collapsed}>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.1结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.2结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.3结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
            </Collapsible>

            <TouchableOpacity onPress={() => setCollapsed1(!collapsed1)} style={styles.header1}>
              <Text style={styles.headerText}>01.结直肠癌病理                            <Text style={{ color: '#999' }}>共3节  <Image
                source={require('../../assets/images/xiala.png')}
                style={{ width: 15, height: 15, marginLeft: 10 }}
              ></Image></Text></Text>
            </TouchableOpacity>
            <Collapsible collapsed={collapsed1}>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.1结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.2结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.3结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
            </Collapsible>

            <TouchableOpacity onPress={() => setCollapsed2(!collapsed2)} style={styles.header1}>
              <Text style={styles.headerText}>01.结直肠癌病理                            <Text style={{ color: '#999' }}>共3节  <Image
                source={require('../../assets/images/xiala.png')}
                style={{ width: 15, height: 15, marginLeft: 10 }}
              ></Image></Text></Text>
            </TouchableOpacity>
            <Collapsible collapsed={collapsed2}>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.1结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.2结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
              <View style={styles.panel}>
                <Text style={styles.panelText}>1.3结直肠癌概述</Text>
                <Text style={{ marginTop: 10, color: "#CCCCCC", fontSize: 12 }}>时长：11：45″</Text>
              </View>
            </Collapsible>


          </ScrollView>







        </View>
        <View style={styles.tabContent}>
          <ScrollView>
            <Image
              source={require('../../assets/images/u567.png')}
              style={{ width: Dimensions.get('window').width, height: 250 }}
            ></Image>
            <Image
              source={require('../../assets/images/u569.png')}
              style={{ width: Dimensions.get('window').width, height: 250, marginTop: 10 }}
            ></Image>
            <Image
              source={require('../../assets/images/u571.png')}
              style={{ width: Dimensions.get('window').width, height: 250, marginTop: 10 }}
            ></Image>

          </ScrollView>
        </View>
        <View style={styles.tabContent}>
          <ScrollView>
            {
              data.map((item: any, index: any) => {
                return (
                  <View style={styles.body}>
                    <Image
                      source={require("../../assets/images/c3_1.png")}
                      style={{ width: 80, height: 80, marginRight: 10, borderRadius: 50 }}
                    ></Image>
                    <View>
                      <Text style={{ fontSize: 12, color: "#999999" }}>{item.xiangname}</Text>
                      <Text style={{ fontSize: 12, color: "#999999", marginTop: 10 }}>{item.xiangtitle}</Text>
                      <Text style={{ fontSize: 12, color: "#999999", marginTop: 13 }}>2019-05-23</Text>
                    </View>
                  </View>
                )
              })
            }
          </ScrollView>
        </View>
      </Tabs>


      <View style={styles.bottom}>
        <TouchableOpacity
          onPress={() => {
            setNum(1227)
            setFlag(!flag)
          }
          }
        >
          <Text>
            {
              flag ? <Image
                source={require('../../assets/images/dianzanHong.png')}
                style={{ width: 20, height: 20, marginRight: 10 }}
              ></Image> : <Image
                source={require('../../assets/images/dianzan.png')}
                style={{ width: 20, height: 20, marginRight: 10 }}
              ></Image>
            }
            <Text>{num}</Text></Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            toggleModal()
          }}
        >
          <Text><Image
            source={require('../../assets/images/xiaoxi copy.png')}
            style={{ width: 20, height: 20, marginRight: 10 }}
          ></Image><Text>1423</Text></Text>
        </TouchableOpacity>



        <TouchableOpacity
          onPress={() => {
            toggleModal1()
          }}
        >
          <Text><Image
            source={require('../../assets/images/fenxaing.png')}
            style={{ width: 20, height: 20, marginRight: 10 }}
          ></Image><Text>136</Text></Text>

        </TouchableOpacity>



      </View>


      {/* Modal 弹出层 */}
      <Modal
        animationType="slide" // 弹出层的动画效果（slide, fade等）
        transparent={true}    // 设置为 true 可使背景变暗
        visible={visible}     // 控制 Modal 的显示/隐藏
        onRequestClose={toggleModal} // Android 设备上的返回按钮
      >
        <View style={styles.modalBackground}>
          <View style={styles.modalContent}>

            <TouchableOpacity onPress={toggleModal}>
              <Text>取消</Text>
            </TouchableOpacity>

            <Text>评论</Text>
            <TouchableOpacity
              onPress={() => {
                toggle1Modal()
              }}
            >
              <Text>发布</Text>
            </TouchableOpacity>


          </View>
          <View style={styles.Shuru}>
            <TextInput
              style={styles.input} // 设置输入框样式
              placeholder="请输入文本" // 设置占位符
              value={text} // 设置输入框的值
              onChangeText={setText} // 监听文本变化
            />
          </View>
        </View>
      </Modal>
      <Modal
        animationType="slide" // 弹出层的动画效果（slide, fade等）
        transparent={true}    // 设置为 true 可使背景变暗
        visible={visible1}     // 控制 Modal 的显示/隐藏
        onRequestClose={toggleModal1} // Android 设备上的返回按钮  
      >
        <View style={styles.modalBackground}>
          <View style={styles.modalContent}>

            <TouchableOpacity >
              <Text> </Text>
            </TouchableOpacity>

            <Text>分享</Text>
            <TouchableOpacity>
              <Text> </Text>
            </TouchableOpacity>


          </View>
          <View style={styles.Shuru1}>
            <View style={styles.q1}>

              <TouchableOpacity
                onPress={() => {
                  weixin()
                }}
              >
                <View>
                  <Image
                    source={require('../../assets/images/weixin.png')}
                    style={{ width: 40, height: 40, marginRight: 10, borderRadius: 50, marginLeft: 13 }}
                  ></Image>
                  <Text style={{ marginLeft: 5, marginTop: 6 }}>微信好友</Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => {
                  qq()
                }}
              >
                <View>
                  <Image
                    source={require('../../assets/images/QQhaoyou.png')}
                    style={{ width: 40, height: 40, marginRight: 10, borderRadius: 50, marginLeft: 10 }}
                  ></Image>
                  <Text style={{ marginLeft: 5, marginTop: 6 }}>QQ好友</Text>
                </View>

              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => {
                  xinlang()
                }}
              >
                <View>
                  <Image
                    source={require('../../assets/images/xinlang.png')}
                    style={{ width: 40, height: 40, marginRight: 10, borderRadius: 50, marginLeft: 13 }}
                  ></Image>
                  <Text style={{ marginLeft: 5, marginTop: 6 }}>新浪微博</Text>
                </View>
              </TouchableOpacity>


            </View>
            <TouchableOpacity
              onPress={() => {
                togsdgleModal1()
              }}
            >
              <Text style={{
                // 文字居中
                textAlign: 'center',
              }}>取消</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>


    </View>
  );
}

const styles = StyleSheet.create({
  slider: {
    width: '100%',
    height: 40,
    marginTop: -30,
  },
  downloadButton1: {
    position: 'absolute',
    bottom: 20, // 确保按钮距离底部一定距离
    right: 20, // 确保按钮距离右侧一定距离
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    zIndex: 1, // 确保按钮在视频之上
  },
  q1: {
    width: "80%",
    height: 85,
    backgroundColor: '#fff',
    marginTop: 20,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    alignSelf: 'center',
  },
  Shuru: {
    width: "100%",
    height: 60,
    backgroundColor: '#fff',
  },
  Shuru1: {
    width: "100%",
    height: 150,
    backgroundColor: '#fff',
  },

  modalBackground: {
    flex: 1,
    height: 500,
    justifyContent: 'flex-end', // 让弹出层显示在底部
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    width: '100%',
    borderTopLeftRadius: 10,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 0.5,
    borderBottomColor: '#e4e4e4',
    justifyContent: 'space-between',
  },
  bottom: {
    width: "100%",
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 50,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e4e4e4',
  },
  header: {
    alignItems: 'center',
    height: 40,
    borderBottomWidth: 1,
    borderBottomColor: '#e4e4e4',
  },
  header1: {
    alignItems: 'center',
    height: 40,
    borderBottomWidth: 1,
    borderBottomColor: '#e4e4e4',
    marginTop: 10,
  },
  collapsedContent: {
    marginTop: 10,
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  },
  headerText: {
    fontSize: 18,
    color: '#333',
  },
  panel: {
    padding: 10,
  },
  panelText: {
    fontSize: 16,
    color: '#333',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  top: {
    width: Dimensions.get('window').width,
    height: 240,
    backgroundColor: 'red',
  },
  topText: {
    color: '#fff',
    fontSize: 20,
  },
  tabs: {
    flex: 1,
    marginTop: 10, // 添加顶部的间隔，避免和上面的元素重叠
  },
  tabContent: {
    padding: 15,
    height: Dimensions.get('window').height - 400,
    backgroundColor: '#fff',
  },
  playButton: {
    position: 'absolute',
    top: '40%', // 将按钮放置在视频的中间
    left: '40%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  playButtonText: {
    color: '#fff',
    fontSize: 18,
  },
  downloadButton: {
    position: 'absolute',
    // 放在视频的底部
    bottom: 10,
    right: 10,

  },
  downloadButtonText: {
    color: 'red',
    fontSize: 16,
  },
  downloadButtonText1: {
    color: 'white',
    fontSize: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  body: {
    flexDirection: 'row',
    marginTop: 10,
    marginBottom: 10,
  },
  input: {
    width: '100%',
    height: 40,
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    marginBottom: 20,
  },
});